<template>
  <div class="c-clock" :style="`color:${color}`">
    <b>{{currentDate}}</b>
    <b>{{currentWeek}}</b>
    <b>{{currentTime}}</b>
  </div>
</template>
<script>
export default {
  name: "data-v-clock",
  props:['color'],
  data() {
    return {
      currentDate: "",
      currentWeek: "",
      currentTime: "",
    };
  },
  methods: {
    // 设置时间
    setDate() {
      var date = new Date();
      var db = function (d) {
        if (d < 10) {
          return "0" + d;
        }
        return d;
      };
      var y = date.getFullYear();
      var m = db(date.getMonth() + 1);
      var d = db(date.getDate());

      var h = date.getHours();
      var mt = date.getMinutes();
      var s = date.getSeconds();

      var weeks = ["日", "一", "二", "三", "四", "五", "六"];
      var w = date.getDay();

      this.currentDate = y + "-" + m + "-" + d;
      this.currentWeek = "星期" + weeks[w];
      this.currentTime = db(h) + ": " + db(mt) + ": " + db(s);
      this.timer = setTimeout(this.setDate, 1000);
    },
  },
  created() {
    this.setDate();
  },
  destory() {
    clearTimeout(this.timer);
  },
};
</script>

<style>
.c-clock > b {
  margin-right: 10px;
}
</style>